<template>
  <el-dialog title="考题" :lock-scroll="false" :close-on-click-modal="false" :fullscreen="true"
    :visible.sync="exercisesDialogBak" width="800px" class="innerBox11" :before-close="close">
    <div class="tigan-box">
      <div class="inner">
        <div class="top-box">
          <div class="title">
            基本信息
          </div>
          <el-form :model="exercisesForm" :rules="exercisesFormRules" ref="exercisesForm" label-width="190px"
            style="padding-right: 30px;padding-top: 10px;"
            label-position="right">
            <el-row>
              <el-col :span="12">
                <el-form-item label="考题名称：" prop="examName">
                  <el-input style="width: 240px" v-model="exercisesForm.examName" placeholder="请输入考题名称" filterable
                    clearable>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="考题类型：" prop="deptCode">
                  <el-select style="width: 240px" v-model="exercisesForm.deptCode" placeholder="请选择考题类型"
                    :remote-method="getDept" @change="deptChange"  filterable clearable remote
                    reserve-keyword>
                    <el-option v-for="item in deptOptions" :key="item.id" :label="item.deptName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="考题时长：" prop="examTime">
                  <el-input style="width: 240px" v-model="exercisesForm.examTime" placeholder="请填写考题时长" type="number">
                    <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="考题分值：" prop="examTotalScore">
                  <el-input style="width: 240px" v-model="exercisesForm.examTotalScore" placeholder="请填写考题分值" type="number">
                    <template slot="append">分</template>
                  </el-input>
                </el-form-item>
              </el-col> -->
              <el-col :span="24">
                <el-form-item label="考题题干：" prop="examText">
                  <el-input style="min-width: 340px" v-model="exercisesForm.examText" placeholder="请填写考题题干" size="small"
                    type="textarea" rows="4">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="注意事项及说明(文本)：" prop="examNotes">
                  <el-input style="min-width: 340px" v-model="exercisesForm.examNotes" placeholder="请填写注意事项及说明" size="small"
                    type="textarea" rows="4">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="注意事项及说明(图片)：" prop="image">
                  <el-upload
                    :action="uploadUrl"
                    :limit='1'
                    :headers='headers'
                    list-type="picture-card"
                    :file-list="exercisesForm.imageList"
                    :on-success="handleAvatarSuccess"
                    :on-preview="handlePictureCardPreview"
                  >
                    <!-- :on-remove="handleRemove" -->
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog title="预览" :visible.sync="dialogVisible" append-to-body width="800px">
                    <div style="height: 80%;width: 760px;overflow: auto;">
                      <img style="width: 700px;height: auto;margin: 0 auto;" :src="dialogImageUrl" alt="">
                    </div>
                  </el-dialog>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="是否需要密码：" prop="passwordType">
                  <!-- {{ exercisesForm.passwordType   true: 1 需要密码   false： 0 不需要密码 }} -->
                  <el-switch
                    v-model="exercisesForm.passwordType"
                    :disabled="exercisesForm.id && exercisesForm.createUserId !== userInfo.id"
                    active-text="需要"
                    inactive-text="不需要">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="exercisesForm.passwordType">
                <el-form-item label="密码：" prop="password">
                  <el-input type="password" style="width: 240px" v-model="exercisesForm.password" autocomplete="off" placeholder="请输入密码" :disabled="exercisesForm.id && exercisesForm.createUserId !== userInfo.id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"  v-if="exercisesForm.passwordType">
                <el-form-item label="确认密码：" prop="checkPassword">
                  <el-input type="password" style="width: 240px" v-model="exercisesForm.checkPassword" autocomplete="off" placeholder="请输入密码" :disabled="exercisesForm.id && exercisesForm.createUserId !== userInfo.id"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="top-box upload-box">
          <div class="title">
            评分卡
            <div class="upload-box-inner">
              <el-button type="primary" icon="el-icon-upload" size="small">点我上传</el-button>
              <input ref="pingfenkaRef" class='inputStyle' type="file" @change="pingfenkaUpload" />
            </div>
            <div class="sss">
              <el-button type='text'>
                <a
                download="评分卡模板.xlsx"
                href="https://www.solacemeta.com/osceadmin/osce-template/评分卡.xlsx"
                class="btn"
                style="color:#2d8cf0;"
                >下载评分卡模板</a>
              </el-button>
            </div>
          </div>
          <div class="upload-inner">
            <el-table
              :data="pingfenkaData"
              border
              style="width: 100%"
              max-height="350"
              size="mini"
              :span-method="pingfenkaObjectSpanMethod"
              :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
            >
              <el-table-column
                v-for="(item, index) in pingfenkaCol"
                :key="index"
                :prop="item.headValue"
                :label="item.headName"
                minWidth="180"
              >
                <template slot-scope="scope">
                  {{ scope.row[item.headValue] }}
                </template>
              </el-table-column>
              <el-table-column
              label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="pingfenkaDel(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="top-box upload-box">
          <div class="title">
            物资、物品清单
            <div class="upload-box-inner">
              <el-button type="primary" icon="el-icon-upload" size="small">点我上传</el-button>
              <input ref='wuziwupinRef' class='inputStyle' type="file" @change="wuziwupinUpload" />
            </div>
            <div class="sss">
              <el-button type='text'>
                <a
                download="物资物品清单模板.xlsx"
                href="https://www.solacemeta.com/osceadmin/osce-template/物资物品清单.xlsx"
                class="btn"
                style="color:#2d8cf0;"
                >下载物资、物品清单模板</a>
              </el-button>
            </div>
          </div>
          <div class="upload-inner">
            <el-table
              :data="wuziwupinData"
              border
              style="width: 100%"
              max-height="350"
              size="mini"
              :span-method="wuziwupinObjectSpanMethod"
              :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
            >
              <el-table-column
                v-for="(item, index) in wuziwupinCol"
                :key="index"
                :prop="item.headValue"
                :label="item.headName"
                minWidth="180"
              >
                <template slot-scope="scope">
                  {{ scope.row[item.headValue] }}
                </template>
              </el-table-column>
              <el-table-column
              label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="wuziwupinDel(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="top-box upload-box">
          <div class="title">
            提示卡
            <div class="upload-box-inner">
              <el-button type="primary" icon="el-icon-upload" size="small">点我上传</el-button>
              <input ref='tishikaRef' class='inputStyle' type="file" @change="tishikaUpload" />
            </div>
            <div class="sss">
              <el-button type='text'>
                <a
                download="提示卡模板.xlsx"
                href="https://www.solacemeta.com/osceadmin/osce-template/提示卡.xlsx"
                class="btn"
                style="color:#2d8cf0;"
                >下载提示卡模板</a>
              </el-button>
            </div>
          </div>
          <div class="upload-inner">
            <el-table
              :data="tishikaData"
              border
              style="width: 100%"
              max-height="350"
              size="mini"
              :span-method="tishikaObjectSpanMethod"
              :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
            >
              <el-table-column
                v-for="(item, index) in tishikaCol"
                :key="index"
                :prop="item.headValue"
                :label="item.headName"
                minWidth="180"
              >
                <template slot-scope="scope">
                  {{ scope.row[item.headValue] }}
                </template>
              </el-table-column>
              <el-table-column
              label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="tishikaDel(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="bot">
      <el-button @click="close">返 回</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import * as XLSX from 'xlsx'
import {examinationSaveAll, examinationUpdateAll, examinationQueryDetails} from '@/api/examTest.js'
export default {
  props: ['exercisesDialogBak', 'examinationIdDialog', 'passwordCheck'],
  data () {
    var validatePass = (rule, value, callback) => {
      console.log('value', value)
      if (value === '' || value === null) {
        callback(new Error('请输入密码'))
      } else {
        if (this.exercisesForm.password !== '') {
          this.$refs.exercisesForm.validateField('checkPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.exercisesForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      deptLoading: false,
      dialogVisible: false,
      dialogImageUrl: '',
      uploadUrl: `${window.SITE_CONFIG.baseUrl}/tool/upload/uploadMultipartFile`,
      headers: {
        token: Vue.cookie.get('token')
      },
      exercisesForm: {
        deptCode: '',
        examName: '',
        examTime: '',
        examTotalScore: '',
        passwordType: false,
        password: '',
        checkPassword: '',
        // examScoreMin: '1',
        examText: '',
        imageList: [],
        examNotes: ''
      },
      userInfo: this.$store.state.user,
      exercisesFormRules: {
        deptCode: [{ required: true, message: '试题类型不能为空', trigger: 'change' }],
        examName: [{ required: true, message: '考题名称不能为空', trigger: 'change' }],
        examTime: [{ required: true, message: '考题时长不能为空', trigger: 'change' }],
        examTotalScore: [{ required: true, message: '考题分值不能为空', trigger: 'change' }],
        // examScoreMin: [{ required: true, message: '评分设置不能为空', trigger: 'change' }],
        examText: [{ required: true, message: '考题题干不能为空', trigger: 'change' }],
        // examNotes: [{ required: true, message: '注意事项及说明不能为空', trigger: 'change' }],
        password: [
            { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPassword: [
            { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      },
      deptOptions: [],
      // 评分卡
      pingfenkaData: [],
      pingfenkaDataBak: [],
      pingfenkaCol: [
        {
          headName: '评分项目名称',
          headValue: `head0`,
          flag: 'scoreCardItem'
        },
        {
          headName: '评分标准',
          headValue: `head1`,
          flag: 'scoreCardScoringCriteria'
        },
        {
          headName: '分数',
          headValue: `head2`,
          flag: 'scoreCardTotalScore'
        }
      ],
      // 物资、物品清单
      wuziwupinData: [],
      wuziwupinDataBak: [],
      wuziwupinCol: [
        {
          headName: '类别名称',
          headValue: `head0`,
          flag: 'typeName'
        },
        {
          headName: '具体要求',
          headValue: `head1`,
          flag: 'specificRequirement'
        },
        {
          headName: '数量',
          headValue: `head2`,
          flag: 'count'
        },
        {
          headName: '标准配置公用物品数量',
          headValue: `head3`,
          flag: 'standard'
        },
        {
          headName: '装箱',
          headValue: `head4`,
          flag: 'encasement'
        }
      ],
      // ordersn
      // examinationId
      // 提示卡
      tishikaData: [],
      tishikaDataBak: [],
      tishikaCol: [
        {
          headName: '专业',
          headValue: `head0`,
          flag: 'cueMajor'
        },
        {
          headName: '类型名称',
          headValue: `head1`,
          flag: 'typeName'
        },
        {
          headName: '题干',
          headValue: `head2`,
          flag: 'cueText'
        },
        {
          headName: '提示卡内容',
          headValue: `head3`,
          flag: 'cueContent'
        }
      ]
    }
  },
  methods: {
    close () {
      this.$emit('closeHandle')
    },
    // 查看图片
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleAvatarSuccess (val) {
      this.exercisesForm.imageList = [
        {
          name: '文件',
          url: val.url
        }
      ]
    },
    // 清空
    resetForm () {
      this.$refs['exercisesForm'].resetFields()
      this.$refs.pingfenkaRef.value = ''
      this.$refs.wuziwupinRef.value = ''
      this.$refs.tishikaRef.value = ''
      this.pingfenkaData = []
      this.pingfenkaDataBak = []
      this.wuziwupinData = []
      this.wuziwupinDataBak = []
      this.tishikaData = []
      this.tishikaDataBak = []
    },
    getInfo () {
      this.$refs.pingfenkaRef.value = ''
      this.$refs.wuziwupinRef.value = ''
      this.$refs.tishikaRef.value = ''
      let params = {
        examinationId: this.examinationIdDialog
      }
      console.log('this.passwordCheck', this.passwordCheck)
      if (this.passwordCheck !== '') {
        params.password = this.passwordCheck
        params.passwordType = '1'
      } else {
        params.passwordType = '0'
      }
      examinationQueryDetails(params).then(res => {
        this.exercisesForm = JSON.parse(JSON.stringify(res.data.examinationDetail.examinationEntity))
        if (res.data.examinationDetail.examinationEntity.passwordType === '1') {
          this.exercisesForm.passwordType = true
          this.exercisesForm.password = this.passwordCheck
          this.exercisesForm.checkPassword = this.passwordCheck
        } else {
          this.exercisesForm.passwordType = false
        }
        let aaa = JSON.parse(JSON.stringify(this.exercisesForm))
        this.exercisesForm = {}
        this.exercisesForm = JSON.parse(JSON.stringify(aaa))
        if (this.exercisesForm.image !== null && this.exercisesForm.image !== '') {
          this.exercisesForm.imageList = [
            {
              name: '文件',
              url: this.exercisesForm.image
            }
          ]
        } else {
          this.exercisesForm.imageList = []
        }
        this.pingfenkaData = []
        res.data.examinationDetail.examScoreCards.map(item => {
          this.pingfenkaData.push({
            head0: item.scoreCardItem,
            head1: item.scoreCardScoringCriteria,
            head2: item.scoreCardTotalScore
          })
        })
        this.wuziwupinData = []
        res.data.examinationDetail.examSelfInspectionCardEntities.map(item => {
          this.wuziwupinData.push({
            head0: item.typeName,
            head1: item.specificRequirement,
            head2: item.count,
            head3: item.standard,
            head4: item.encasement
          })
        })
        this.tishikaData = []
        res.data.examinationDetail.examCueCards.map(item => {
          this.tishikaData.push({
            head0: item.cueMajor,
            head1: item.typeName,
            head2: item.cueText,
            head3: item.cueContent
          })
        })
      })
    },
    submit () {
      if (this.pingfenkaData.length === 0) {
        this.$message.warning('请先上传评分卡信息')
        return
      }
      let img = ''
      console.log('this.exercisesForm.imageList', this.exercisesForm.imageList)
      if (this.exercisesForm.imageList.length > 0) {
        img = this.exercisesForm.imageList[0].url
      }
      // if (this.wuziwupinData.length === 0) {
      //   this.$message.warning('请先上传物资、物品清单信息')
      //   return
      // }
      // if (this.tishikaData.length === 0) {
      //   this.$message.warning('请先上传提示卡信息')
      //   return
      // }
      this.$refs['exercisesForm'].validate(valid => {
        if (valid) {
          // 新增
          let deptName = this.deptOptions.filter(val => val.id === this.exercisesForm.deptCode)[0].deptName
          let examinationEntity = {
            deptName: deptName,
            deptCode: this.exercisesForm.deptCode,
            examName: this.exercisesForm.examName,
            examTime: this.exercisesForm.examTime,
            examTotalScore: this.exercisesForm.examTotalScore,
            examText: this.exercisesForm.examText,
            image: img,
            examNotes: this.exercisesForm.examNotes,
            createUserId: this.$store.state.user.id,
            createUserName: this.$store.state.user.realName
            // createOperatorId: this.$store.state.user.id,
            // id: this.exercisesForm.id
          }
          // 判断是否需要密码
          if (this.exercisesForm.passwordType) {
            examinationEntity.passwordType = '1'
            examinationEntity.password = this.exercisesForm.password
          } else {
            examinationEntity.passwordType = '0'
          }
          console.log(examinationEntity)
          // 评分卡
          let examScoreCards = []
          this.pingfenkaData.map((val, key) => {
            examScoreCards.push({
              scoreCardItem: val.head0,
              scoreCardScoringCriteria: val.head1,
              scoreCardTotalScore: val.head2,
              ordersn: key + 1
            })
          })
          // 物资、物品清单
          let examSelfInspectionCardEntities = []
          this.wuziwupinData.map((val, key) => {
            examSelfInspectionCardEntities.push({
              typeName: val.head0,
              specificRequirement: val.head1,
              count: val.head2,
              standard: val.head3,
              encasement: val.head4,
              ordersn: key + 1
            })
          })
          // 提示卡
          let examCueCards = []
          this.tishikaData.map((val, key) => {
            examCueCards.push({
              cueMajor: val.head0,
              typeName: val.head1,
              cueText: val.head2,
              cueContent: val.head3,
              encasement: val.head4,
              ordersn: key + 1
            })
          })
          // 参数
          let params = {
            examinationEntity,
            // 评分卡
            examScoreCards,
            // 物资、物品清单
            examSelfInspectionCardEntities,
            // 提示卡
            examCueCards
          }
          if (this.examinationIdDialog) {
            params.examinationEntity.id = this.examinationIdDialog
            if (this.passwordCheck !== '') {
              params.passwordCheck = this.passwordCheck
            }
            examinationUpdateAll(params).then(res => {
              if (res.data.code === 0) {
                this.$message.success('考题更新成功')
                setTimeout(() => {
                  this.$emit('closeHandle')
                }, 500)
              }
            })
          } else {
            examinationSaveAll(params).then(res => {
              if (res.data.code === 0) {
                this.$message.success('考题创建成功')
                setTimeout(() => {
                  this.$emit('closeHandle')
                }, 500)
              }
            })
          }
        }
      })
    },
    getDept (val) {
      this.deptLoading = true
      this.$http({
        url: '/exam/dept/list',
        method: 'get',
        params: {
          page: 1,
          limit: 10,
          deptName: val
        }
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.deptOptions = data.page.records
          // console.log(data)
          this.deptLoading = false
        } else {
          this.deptOptions = []
          this.deptLoading = false
        }
      })
    },
    deptChange () {

    },
    // 评分卡 start
    pingfenkaObjectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 获取当前单元格的值
        const currentValue = row[column.property]
        // 获取上一行相同列的值
        const preRow = this.pingfenkaData[rowIndex - 1]
        const preValue = preRow ? preRow[column.property] : null
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1
          for (let i = rowIndex + 1; i < this.pingfenkaData.length; i++) {
            const nextRow = this.pingfenkaData[i]
            const nextValue = nextRow[column.property]
            if (nextValue === currentValue) {
              rowspan++
            } else {
              break
            }
          }
          return { rowspan, colspan: 1 }
        }
      }
    },
    pingfenkaDel (val) {
      let arr = JSON.parse(JSON.stringify(this.pingfenkaData))
      this.pingfenkaData = arr.filter(item => JSON.stringify(item) !== JSON.stringify(val))
    },
    pingfenkaUpload (event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        this.pingfenkaDataBak = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        if (this.pingfenkaDataBak[0][0] === '评分项目名称' && this.pingfenkaDataBak[0][1] === '评分标准' && this.pingfenkaDataBak[0][2] === '分数') {
          this.col = []
          this.colFields = []
          this.pingfenkaData = []

          for (let q = 0; q < this.pingfenkaDataBak.length; q++) {
            if (this.pingfenkaDataBak[q][0] === undefined) {
              this.pingfenkaDataBak[q][0] = this.pingfenkaDataBak[q - 1][0]
            }
          }
          this.pingfenkaDataBak[0].map((item, index) => {
            this.col.push({
              headName: item,
              headValue: `head${index}`
            })
            this.colFields.push(`head${index}`)
          })
          for (let i = 1; i < this.pingfenkaDataBak.length; i++) {
            let obj = {}
            for (let k = 0; k < this.pingfenkaDataBak[i].length; k++) {
              obj[`head${k}`] = this.pingfenkaDataBak[i][k]
            }
            this.pingfenkaData.push(obj)
          }
          setTimeout(() => {
            this.$refs.pingfenkaRef.value = ''
          }, 1000)
        } else {
          this.$message.warning('请上传正确的评分卡文件')
        }
      }
      reader.readAsArrayBuffer(file)
    },
    // 评分卡 end

    // 物资、物品清单 start
    wuziwupinObjectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 获取当前单元格的值
        const currentValue = row[column.property]
        // 获取上一行相同列的值
        const preRow = this.wuziwupinData[rowIndex - 1]
        const preValue = preRow ? preRow[column.property] : null
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1
          for (let i = rowIndex + 1; i < this.wuziwupinData.length; i++) {
            const nextRow = this.wuziwupinData[i]
            const nextValue = nextRow[column.property]
            if (nextValue === currentValue) {
              rowspan++
            } else {
              break
            }
          }
          return { rowspan, colspan: 1 }
        }
      }
    },
    wuziwupinDel (val) {
      let arr = JSON.parse(JSON.stringify(this.wuziwupinData))
      this.wuziwupinData = arr.filter(item => JSON.stringify(item) !== JSON.stringify(val))
    },
    wuziwupinUpload (event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        this.wuziwupinDataBak = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        if (this.wuziwupinDataBak[0][0] === '类别名称' && this.wuziwupinDataBak[0][1] === '具体要求' && this.wuziwupinDataBak[0][2] === '数量' && this.wuziwupinDataBak[0][3] === '标准配置公用物品数量' && this.wuziwupinDataBak[0][4] === '装箱') {
          this.col = []
          this.colFields = []
          this.wuziwupinData = []

          for (let q = 0; q < this.wuziwupinDataBak.length; q++) {
            if (this.wuziwupinDataBak[q][0] === undefined) {
              this.wuziwupinDataBak[q][0] = this.wuziwupinDataBak[q - 1][0]
            }
          }
          this.wuziwupinDataBak[0].map((item, index) => {
            this.col.push({
              headName: item,
              headValue: `head${index}`
            })
            this.colFields.push(`head${index}`)
          })
          for (let i = 1; i < this.wuziwupinDataBak.length; i++) {
            let obj = {}
            for (let k = 0; k < this.wuziwupinDataBak[i].length; k++) {
              obj[`head${k}`] = this.wuziwupinDataBak[i][k]
            }
            this.wuziwupinData.push(obj)
          }
          setTimeout(() => {
            this.$refs.wuziwupinRef.value = ''
          }, 1000)
        } else {
          this.$message.warning('请上传正确的物资、物品清单文件')
        }
      }
      reader.readAsArrayBuffer(file)
    },
    // 物资、物品清单 end

    // 提示卡 start
    tishikaObjectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 获取当前单元格的值
        const currentValue = row[column.property]
        // 获取上一行相同列的值
        const preRow = this.tishikaData[rowIndex - 1]
        const preValue = preRow ? preRow[column.property] : null
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1
          for (let i = rowIndex + 1; i < this.tishikaData.length; i++) {
            const nextRow = this.tishikaData[i]
            const nextValue = nextRow[column.property]
            if (nextValue === currentValue) {
              rowspan++
            } else {
              break
            }
          }
          return { rowspan, colspan: 1 }
        }
      }
    },
    tishikaDel (val) {
      let arr = JSON.parse(JSON.stringify(this.tishikaData))
      this.tishikaData = arr.filter(item => JSON.stringify(item) !== JSON.stringify(val))
    },
    tishikaUpload (event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        this.tishikaDataBak = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        if (this.tishikaDataBak[0][0] === '专业' && this.tishikaDataBak[0][1] === '类型名称' && this.tishikaDataBak[0][2] === '题干' && this.tishikaDataBak[0][3] === '提示卡内容') {
          this.col = []
          this.colFields = []
          this.tishikaData = []

          for (let q = 0; q < this.tishikaDataBak.length; q++) {
            if (this.tishikaDataBak[q][0] === undefined) {
              this.tishikaDataBak[q][0] = this.tishikaDataBak[q - 1][0]
            }
          }
          this.tishikaDataBak[0].map((item, index) => {
            this.col.push({
              headName: item,
              headValue: `head${index}`
            })
            this.colFields.push(`head${index}`)
          })
          for (let i = 1; i < this.tishikaDataBak.length; i++) {
            let obj = {}
            for (let k = 0; k < this.tishikaDataBak[i].length; k++) {
              obj[`head${k}`] = this.tishikaDataBak[i][k]
            }
            this.tishikaData.push(obj)
          }
          setTimeout(() => {
            this.$refs.tishikaRef.value = ''
          }, 1000)
        } else {
          this.$message.warning('请上传正确的提示卡文件')
        }
      }
      reader.readAsArrayBuffer(file)
    }
    // 提示卡 end

  }
}
</script>
<style lang="scss">
.innerBox11{
  .el-dialog__body{
    padding: 0 !important
  }
}
  .tigan-box{
    height: calc( 100vh - 54px);
    width: 100%;
    .inner{
      padding-top: 20px;
      padding-bottom: 40px;
      height: 100%;
      overflow: auto;
      width: 1000px;
      margin: 0 auto;
      .top-box {
        border: 1px solid rgba(10, 115, 78, 0.2);
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 10px;
        
        .title {
          width: 100%;
          height: 40px;
          line-height: 40px;
          color: #333;
          font-size: 16px;
          font-weight: 600;
          padding-left: 10px;
          margin: 0;
          // margin-bottom: 20px;
          background: rgba(10, 115, 78, 0.2);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          position: relative;
          .sss{
            position: absolute;
            right: 20px;
            top: 0;
          }
        }
      }
      .upload-box{
        height: 400px;
        display: flex;
        flex-direction: column;
        .upload-inner{
          width: 100%;
          flex: 1;
        }
      }
    }
  }
  .bot{
      height: 50px;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-image: radial-gradient(transparent 1px, #ffffff 1px);
      background-size: 4px 4px;
      backdrop-filter: saturate(50%) blur(10px);
      -webkit-backdrop-filter: saturate(50%) blur(4px);
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;
      .bot-inner{
        min-width: 801px;
        max-width: 1000px;
        margin: 10px auto 0;
        background-color: rgba(255,255,255,0.1);
      }
    }
    .upload-box-inner{
      cursor: pointer;
      position: relative;
      margin-left: 10px;
      .inputStyle{
        position: absolute;
        left: 0;
        top: 0;
        height: 32px;
        line-height: 26px;
        margin-left: 10px;
        opacity: 0;
        cursor: pointer;
      }
    }
</style>